import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const labelsDocs= { source: { code: `labels = map[string]string{"foo": "bar"}
component.NewLabels(labels)`
}}

export const selectorsDocs= { source: { code: `selectors:= component.NewSelectors([]component.Selector{component.NewLabelSelector("app", "httpbin")})`}}

export const expressionSelectorsDocs= { source: { code: `component.NewExpressionSelector("key", component.OperatorIn, []string{"a", "b"})`}}

export const labelsView = {
  config: {
    labels: { ['foo']: 'bar' },
  },
  metadata: {
    type: 'labels',
  },
};

export const selectorsView = {
  config: {
    selectors: [
      {
        metadata: {
          type: 'labelSelector',
        },
        config: {
          key: 'app',
          value: 'httpbin',
        },
      },
    ],
  },
  metadata: {
    type: 'selectors',
  },
};

export const expressionSelectorView = {
  config: {
    key: 'key',
    operator: 'In',
    values: ['a', 'b'],
  },
  metadata: {
    type: 'expressionSelector',
  },
};

export const LabelsStoryTemplate = args => ({
  template: `<app-view-labels [view]= "view"></app-view-labels>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

export const SelectorsStoryTemplate = args => ({
  template: `<app-view-selectors [view]= "view"></app-view-selectors>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

export const ExpressionSelectorStoryTemplate = args => ({
  template: `<app-view-expression-selector [view]= "view"></app-view-expression-selector>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Labels</h1>

<p>The Labels component is used to labels that have key-value pairs.</p>
<h2>Example</h2>

<Meta title="Components/Labels and Selectors" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Labels"
         parameters={{ docs: labelsDocs }}
         args= {{ view: labelsView }}>
    { LabelsStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Labels" />

<h1>Selectors</h1>

<p>The Selectors component is similar to a Labels component except it uses a different color to represent a selector key-value pair.</p>
<h2>Example</h2>

<Canvas withToolbar>
  <Story name="Selectors"
         parameters={{ docs: selectorsDocs }}
         args= {{ view: selectorsView }}>
    { SelectorsStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable  story = "Selectors" />

<h1>Expression Selectors</h1>

<p>The Expression Selectors component can show more complex set operations for key-pairs.</p>
<h2>Example</h2>

<Canvas withToolbar>
  <Story name="Expression Selectors"
         parameters={{ docs: expressionSelectorsDocs }}
         args= {{ view: expressionSelectorView }}>
    { ExpressionSelectorStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Expression Selectors" />
